{% extends 'manage.html' %}
{% load static %}
{% block title %}
    项目管理-统计
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugings/daterangepicker/daterangepicker.css' %}">
{% endblock %}


{% block content %}
    <div class="container-fluid" style="margin-top: 20px">
        <div class="input-group input-group-lg" style="width: 400px">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-lg">日期范围</span>
            </div>
            <input type="text" class="form-control" id="rangePicker" aria-label="Sizing example input"
                   aria-describedby="inputGroup-sizing-lg">
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugings/daterangepicker/moment.min.js' %}"></script>
    <script src="{% static 'plugings/daterangepicker/daterangepicker.js' %}"></script>

    <script>
        $(function () {
            InitDateRangePicker();
        })


        function InitDateRangePicker() {
            // 配置
            var options = {
                maxDate: moment(),  // 最大日期
                alwaysShowCalendars: true,  // 点开默认显示
                showWeekNumbers: true,  // 显示星期几
                ranges: {
                    "今天": [moment(), moment()],
                    "昨天": [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    "最近7天": [moment().subtract(7, 'days'), moment()],
                    "最近30天": [moment().subtract(30, 'days'), moment()],
                    "本月": [moment().startOf('month'), moment().endOf('month')]
                },
                locale: {
                    format: 'YYYY-MM-DD',
                    separator: ' 至 ',
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '开始',
                    toLabel: '结束',
                    customRangeLabel: '自定义',
                    weekLabel: 'W',
                    daysOfWeek: ['一','二', '三', '四', '五', '六', '日'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
            }
            }
            $('#rangePicker').daterangepicker(options, function (start, end, lable) {
                // 选择了时间后函数自动触发
                console.log(start.format('YYYY-MM-DD'), end.add(1, 'days').format('YYYY-MM-DD'))
            })
        }
    </script>
{% endblock %}